<template>
  <div class="upload-container">
    <div class="upload-demo-box">
      <div class="upload-demo-text">
        1、 下载导入文件模板，请阅读模板中的填写规范，按要求填写和编辑内容。
      </div>
      <div class="upload-demo-img">
        <img src="../../assets/images/excel.jpg" alt="支持格式图标" />
        <div>支持xls, xlsx格式</div>
      </div>
      <div class="upload-demo-btn">
        <el-button @click="downloadTemplate">下载模板</el-button>
      </div>
    </div>
    <el-divider direction="vertical" style="height: auto;" />
    <div class="upload-demo-box">
      <div class="upload-demo-text">
        2、 上传填写好的文件。
      </div>
      <div class="upload-demo-img">
        <img src="../../assets/images/excel.jpg" alt="模板图片" />
        <div>支持xls, xlsx格式</div>
      </div>
      <div class="upload-demo-btn">
        <el-upload :action="uploadAction" :on-change="handleUploadChange" :before-upload="beforeUpload">
          <el-button class="upload-btn">上传文件</el-button>
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps<{
  imageSrc: string;
  uploadAction: string;
  downloadTemplate: () => void;
  handleUploadChange: (file: File) => void;
  beforeUpload: (file: File) => boolean;
}>();
</script>

<style scoped lang="scss">
.upload-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  border: 1px solid #dcdfe6;
  padding: 1rem 0;

  .upload-demo-box {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .upload-demo-text {
      width: 80%;
      height: 30%;
      text-align: justify;
    }

    .upload-demo-img {
      width: 60%;
      height: 40%;
      padding: 1rem 0;
      box-sizing: border-box;
      text-align: center;

      img {
        width: 50%;
        margin-bottom: 0.5rem;
      }
    }

    .upload-demo-btn {
      padding: 1rem;
      margin-top: 1rem; // 按钮的间距

      :deep(.el-upload-list) {
        display: none;
      }
    }
  }
}
</style>
